el

您所在的位置：网站首页 › select 值 › el

el

2023-03-31 13:32| 来源: 网络整理| 查看: 265

前言

最近在开发时总遇到一些起奇奇怪怪的需求，例如 el-select 组件需要同时获取用户选中的 label 值跟 value 值，据后台人员说是只传一个 value 匹配不上数据。害，这还不简单，那我就都传过去呗，下面给大家分享几种快速拿到用户选中 label 值的方法。

1. 使用 Arry.find 方法

Arry.find() 方法返回数组中满足提供的测试函数的第一个元素的值，若没有满足测试函数的元素，则返回 undefined。

参数描述function(currentValue, index,arr)必需。数组每个元素需要执行的函数。其中 currentValue 为必需。意为当前元素；index 非必需，意为当前元素的索引值；arr 非必需，意为当前元素所属的数组对象。thisValue非必需。传递给函数的值一般用 this 值。如果这个参数为空， undefined 会传递给 this 值

代码如下：

export default { data() { return { options: [ { value: "0", label: "黄金糕", }, { value: "1", label: "双皮奶", }, { value: "2", label: "蚵仔煎", }, { value: "3", label: "龙须面", }, { value: "4", label: "北京烤鸭", }, ], value: "", }; }, mounted() {}, methods: { // 选中值发生变化时触发 touchOn(e) { //任选其一即可 let obj = {}; obj = this.options.find((item) => { return item.value === e; }); console.log(obj.label); //任选其一即可 let objLabel = this.options.find((item) => item.value == e).label; console.log(objLabel); }, }, }; 2. 通过绑定原生 click 事件来进行传参

代码如下：

通过 $refs 拿到 el-select 组件实例，该实例拥有 selectedLabel 属性，值为当前选中的 label；也可以通过 selected 拿到选中的 option 的组件实例，拥有 label 和 value 两个属性。

代码如下：

export default { data() { return { options: [ { value: "0", label: "黄金糕", }, { value: "1", label: "双皮奶", }, { value: "2", label: "蚵仔煎", }, { value: "3", label: "龙须面", }, { value: "4", label: "北京烤鸭", }, ], value: "", }; }, mounted() {}, methods: { // 选中值发生变化时触发 touchOn(e) { //一定要放在this.$nextTic方法中，否则第一次拿不到值 this.$nextTick(() => { console.log(this.$refs.labelRef.selectedLabel); console.log(this.$refs.labelRef.selected.label); }); }, }, }; 实现效果如下：

在这里插入图片描述

【本文地址】

el

el

今日新闻

推荐新闻